<template>
	<view class="container">

		<view class="example">
			<!-- 基础表单校验 -->
			<uni-forms ref="valiForm" :modelValue="valiFormData">
				<uni-forms-item label="进水泵房" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList1.url" :image-styles="imageStyles" v-if="!fileList1url"
						:sourceType="sourceType" @select="select1" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList1url" :src="fileList1url" class="image1" @click="handleZoom(fileList1url)"></image>
				</uni-forms-item>
				<uni-forms-item label="混凝沉淀池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList2.url" :image-styles="imageStyles" v-if="!fileList2url"
						:sourceType="sourceType" @select="select2" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList2url" :src="fileList2url" class="image1"  @click="handleZoom(fileList2url)" ></image>
				</uni-forms-item>
				<uni-forms-item label="调节事故池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList3.url" :image-styles="imageStyles" v-if="!fileList3url"
						:sourceType="sourceType" @select="select3" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList3url" :src="fileList3url" class="image1" @click="handleZoom(fileList3url)"></image>
				</uni-forms-item>
				<uni-forms-item label="生物池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList4.url" :image-styles="imageStyles" v-if="!fileList4url"
						:sourceType="sourceType" @select="select4" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList4url" :src="fileList4url" class="image1" @click="handleZoom(fileList4url)"></image>
				</uni-forms-item>
				<uni-forms-item label="二沉池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList5.url" :image-styles="imageStyles" v-if="!fileList5url"
						:sourceType="sourceType" @select="select5" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList5url" :src="fileList5url" class="image1" @click="handleZoom(fileList5url)"></image>
				</uni-forms-item>
				<uni-forms-item label="高密沉淀池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList6.url" :image-styles="imageStyles" v-if="!fileList6url"
						:sourceType="sourceType" @select="select6" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList6url" :src="fileList6url" class="image1" @click="handleZoom(fileList6url)"></image>
				</uni-forms-item>
				<uni-forms-item label="中间水池" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList7.url" :image-styles="imageStyles" v-if="!fileList7url"
						:sourceType="sourceType" @select="select7" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList7url" :src="fileList7url" class="image1" @click="handleZoom(fileList7url)"></image>
				</uni-forms-item>
				<uni-forms-item label="出水泵房" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList8.url" :image-styles="imageStyles" v-if="!fileList8url"
						:sourceType="sourceType" @select="select8" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList8url" :src="fileList8url" class="image1" @click="handleZoom(fileList8url)"></image>
				</uni-forms-item>
				<uni-forms-item label="溶解氧检测" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList9.url" :image-styles="imageStyles" v-if="!fileList9url"
						:sourceType="sourceType" @select="select9" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList9url" :src="fileList9url" class="image1" @click="handleZoom(fileList9url)"></image>
				</uni-forms-item>
				<uni-forms-item label="水质水量" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList10.url" :image-styles="imageStyles" v-if="!fileList10url"
						:sourceType="sourceType" @select="select10" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList10url" :src="fileList10url" class="image1" @click="handleZoom(fileList10url)"></image>
				</uni-forms-item>
				<uni-forms-item label="提升泵切换" label-width="90px" name="">
					<uni-file-picker limit="1" :value="fileList11.url" :image-styles="imageStyles" v-if="!fileList11url"
						:sourceType="sourceType" @select="select11" @progress="progress" @success="success" @fail="fail"
						@delete="deletea"></uni-file-picker>
					<image v-if="fileList11url" :src="fileList11url" class="image1" @click="handleZoom(fileList11url)"></image>
				</uni-forms-item>

			</uni-forms>
			<button  type="primary" @click="submit('valiForm')">提交</button>
		</view>

		<!-- pumpStationIn		进水泵房（记录图片路径）
coagulationTank		混凝沉淀池（记录图片路径）
adjustTank		调节事故池（记录图片路径）
biologicalTank		生物池（记录图片路径）
secTank		二沉池（记录图片路径）
highTank		高密沉淀池（记录图片路径）
middlePool		中间水池（记录图片路径）
pumpStationOut		出水泵房（记录图片路径）
aaoInstrument		溶解氧检测（记录图片路径）
water		水质水量（记录图片路径）
liftPump		提升泵切换（记录图片路径） -->


	</view>
</template>
<script>
	import {
		getToken,
		setToken,
		removeToken
	} from '@/utils/auth'
	import {
		updateWSInspection
	} from "@/api/index"
	export default {
		data() {
			return {


				// 图片回显
				fileList1: [],
				fileList1url: '',
				fileList2: [],
				fileList2url: '',
				fileList3: [],
				fileList3url: '',
				fileList4: [],
				fileList4url: '',
				fileList5: [],
				fileList5url: '',
				fileList6: [],
				fileList6url: '',
				fileList7: [],
				fileList7url: '',
				fileList8: [],
				fileList8url: '',
				fileList9: [],
				fileList9url: '',
				fileList10: [],
				fileList10url: '',
				fileList11: [],
				fileList11url: '',
				// 上传图片的样式
				imageStyles: {
					width: 90,
					height: 90,
				},
				// uni.chooseImage值，从相册选择，拍摄
				sourceType: ['album', 'camera'],

				// 校验表单数据
				valiFormData: {
					"record": "",
					"status": "巡检中",
					"id": "",
				},
imgList:[],
status:''


			}
		},
		onLoad: function(option) {
			let item = JSON.parse(option.item)
			this.status = item.status
			this.valiFormData.id = item.id;
			if (item.pumpStationIn) {
				this.fileList1url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.pumpStationIn
			}
			if (item.coagulationTank) {
				this.fileList2url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.coagulationTank
			}
			if (item.adjustTank) {
				this.fileList3url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.adjustTank
			}
			if (item.biologicalTank) {
				this.fileList4url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.biologicalTank
			}
			if (item.secTank) {
				this.fileList5url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.secTank
			}
			if (item.highTank) {
				this.fileList6url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.highTank
			}
			if (item.middlePool) {
				this.fileList7url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.middlePool
			}
			if (item.pumpStationOut) {
				this.fileList8url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.pumpStationOut
			}
			if (item.aaoInstrument) {
				this.fileList9url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.aaoInstrument
			}
			if (item.water) {
				this.fileList10url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.water
			}
			if (item.liftPump) {
				this.fileList11url = 'http://211.103.114.94:2081/camera/IoReadImageByPath?path=' + item.liftPump
			}

		},
		methods: {
			handleZoom(imgSrc) {
				// 使用uni的previeImage方法实现图片预览放大
				this.imgList = []
				this.imgList.push(imgSrc)
				uni.previewImage({
					current: imgSrc, // 当前显示图片的http链接
					urls: this.imgList  // 需要预览的图片http链接列表
				});
			},
			submit(ref) {
				console.info(this.valiFormData)
				
				updateWSInspection(this.valiFormData).then(response => {
					console.info('ccccccc', response)
					if (response == 'success') {
						uni.showToast({
							title: `提交成功`
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: `提交失败`,
							icon: 'fail'
						})
					}


				})

			},
			// 获取上传状态
			select(e) {
				// 获取本地存储中的认证令牌
				console.log('选择文件：', e)
				// 解决file对象取值问题
				// 微信小程序上传-需要微信临时提供临时地址
				const file = e;
				var token = getToken();
				// 处理每张选中的图片
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					// 文件对应的 key , 开发者在服务器端通过这个 key 可以获取到文件二进制内容
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},

					// 成功函数
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList.push(x)
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			// 获取上传进度
			progress(e) {
				// 没有上传空间，不会执行 
				console.log('上传进度：', e)
			},
			// 上传成功
			success(e) {
				// 没有上传空间，不会执行 
				console.log('上传成功')
			},
			// 上传失败
			fail(e) {
				// 没有上传空间，不会执行 
				console.log('上传失败：', e)
			},
			// 删除
			deletea(e) {
				console.log('删除图片', e);
			},

			select1(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList1.push(x)
						this.valiFormData.pumpStationIn = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select2(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList2.push(x)
						this.valiFormData.coagulationTank = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select3(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList3.push(x)
						this.valiFormData.adjustTank = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select4(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList4.push(x)
						this.valiFormData.biologicalTank = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select5(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList5.push(x)
						this.valiFormData.secTank = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select6(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList6.push(x)
						this.valiFormData.highTank = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select7(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList7.push(x)
						this.valiFormData.middlePool = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select8(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList8.push(x)
						this.valiFormData.pumpStationOut = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select9(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList9.push(x)
						this.valiFormData.aaoInstrument = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select10(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList10.push(x)
						this.valiFormData.water = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},
			select11(e) {
				const file = e;
				var token = getToken();
				uni.uploadFile({
					url: 'http://211.103.114.94:2081/app/upload',
					filePath: file.tempFilePaths[0],
					name: 'fileinput',
					formData: {
						token: token,
						app_version: 'your_app_version'
					},
					success: (res) => {
						console.log('上传成功', res.data);
						// uni.uploadFile返回来的结果默认是JSON格式字符串，需要用JSON.parse转换成js对象
						console.log('上传数据转换', JSON.parse(res.data));
						let uploaddata = JSON.parse(res.data)
						let x = {}
						// 下面3个值是uni-app规定的一个不能少
						x.url = uploaddata.data

						x.extname = file.tempFiles[0].name;
						x.name = file.tempFiles[0].extname;
						console.log('上传成功', x);
						this.fileList11.push(x)
						this.valiFormData.liftPump = uploaddata.data;
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error);
					}
				})
			},

		}
	}
</script>
<style lang="scss">
	.example {
		padding: 15px;
		background-color: #fff;
	}

	.segmented-control {
		margin-bottom: 15px;
	}

	.button-group {
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
	}

	.form-item {
		display: flex;
		align-items: center;
	}

	.button {
		display: flex;
		align-items: center;
		height: 35px;
		margin-left: 10px;
	}

	.image1 {
		width: 155rpx;
		height: 155rpx;
	}
</style>